const path = require("path");
// 插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//把css从js中提取出来
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//压缩css
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")



module.exports = {
    //入口,配置多个写对象
    entry: {
        //公共的配置写在前面
        commonCss: "./src/css/common/commoncss.js",
        
        dom:"./src/js/common/dom.js",
        utils:"./src/js/common/utils.js",
 
        //页面的写在后面
        home: "./src/js/home.js",
        adver: "./src/js/adver.js",
        register: "./src/js/register.js",
        login: "./src/js/login.js",
        my: "./src/js/my.js",
        Training: "./src/js/Training.js",
        myInformation: "./src/js/myInformation.js",
        
        

    },
    //出口
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "js/[name]-[hash:5].js"
    },
    //加载器 loader
    module: {
        rules: [
            //1 处理css文件
            {
                test: /\.css$/,  // 匹配所有.css文件
                use: [
                    // 'style-loader', // 创建style标签 把css插入html的head内
                    // MiniCssExtractPlugin.loader,
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../"  //css中查找静态资源(图片)的路径
                        }
                    },
                    'css-loader', // 解析加载css到js中（把css打成字符串）。
                    "postcss-loader"
                ]
            },
            //2 处理less文件
            {
                test: /\.less$/,  // 匹配所有.less文件
                use: [
                    // 'style-loader', // 创建style标签 把css插入html的head内
                    // MiniCssExtractPlugin.loader,
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../"  //css中查找静态资源(图片)的路径
                        }
                    },
                    'css-loader', // 解析加载css到js中（把css打成字符串）。
                    'less-loader', // 编译less为css
                    "postcss-loader"
                ]
            },
            //3 处理css中的背景图片
            {
                test: /\.(jpg|png|gif|jpeg)$/,
                loader: 'url-loader',
                options: {
                    name: '[hash:6].[ext]',  // 图片输出的名字hash长度16位 默认32位
                    limit: 10 * 1024,  // 小于10kb base64处理
                    // 关闭url-loader的es Module  使用commonjs module解析 ,
                    // url-loader默认使用es6模块化解析 而后续使用 html-loader 引入图片是 commonjs解析  不关闭会报错
                    esModule: false,
                    outputPath: 'img', // 图片输出的路径
                }
            },
            //4 处理html中的资源(图片)
            {
                test: /\.html$/,
                loader: "html-loader"

            },
            //5 处理字体图标
            {
                test: /\.(ttf|woff|svg|woff2|eot)$/,
                loader: "file-loader",
                options: {
                    name: '[hash:8].[ext]',
                    outputPath: "fonts"//输出到fonts文件夹中
                }

            },
            //把es6的语法转为es5
            {
                test: /\.js$/,
                loader: 'babel-loader',    // loader 编译es6为es5
                exclude: /node_modules/  // 排除
            }


        ]
    },
    //插件
    plugins: [

        //抽取css
        new MiniCssExtractPlugin({ // 提取css
            filename: 'css/[name]-[hash:5].css' // 重命名输出的css
        }),
        //压缩css
        new OptimizeCssAssetsWebpackPlugin(),

        //配置register
        new HtmlWebpackPlugin({
            template: './src/register.html',
            filename: "register.html", //输出文件的名字,
            // 配置依赖的模块
            chunks: ["register", "commonCss","dom","utils","basic"]
        }),

          //login
          new HtmlWebpackPlugin({
            template: './src/login.html',
            filename: "login.html", //输出文件的名字,
            // 配置依赖的模块
            chunks: ["login", "commonCss","dom","utils","basic"]
        }),
         //首页 home
         new HtmlWebpackPlugin({
            template: './src/home.html',
            filename: "home.html", //输出文件的名字,
            // 配置依赖的模块
            chunks: ["home", "commonCss","dom","utils"]
        }),
        // adver
            new HtmlWebpackPlugin({
            template: './src/adver.html',
            filename: "adver.html", //输出文件的名字,
            // 配置依赖的模块
            chunks: ["adver", "commonCss","dom","utils"]
        }), 
            //我的 my
            new HtmlWebpackPlugin({
                template: './src/my.html',
                filename: "my.html", //输出文件的名字,
                // 配置依赖的模块
                chunks: ["my", "commonCss","dom","utils"]
            }), 
            // 训练 Training
            new HtmlWebpackPlugin({
                template: './src/Training.html',
                filename: "Training.html", //输出文件的名字,
                // 配置依赖的模块
                chunks: ["Training", "commonCss","dom","utils"]
            }), 
            
               // 我的资料ss/ myInformation
               new HtmlWebpackPlugin({
                template: './src/myInformation.html',
                filename: "myInformation.html", //输出文件的名字,
                // 配置依赖的模块
                chunks: ["myInformation", "commonCss","dom","utils"]
            }), 

    ],
    //模式
    mode: "development",
    // mode: "production"
    // 本地开发服务器  会把项目打包到内存中，我们看不到。
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
        compress: true, // 启动gzip压缩
        port: 666,  // 端口
        open: true, // 自动打开浏览器
        // openFile:"./home.html"
        publicPath: '/',  // 默认dist就是服务器根目录 从根目录查找资源
        openPage: 'home.html', // 打开的页面
    },
}